<!doctype html>
<html lang="zh-CN">
 <head> 
  <meta charset="utf-8"> 
  <meta content="width=device-width, initial-scale=1.0" name="viewport"> 
  <title>年度规划项目 - 学员端</title> 
  <script src="../javascript/reload.js"></script> 
  <script src="./1968264071639728128/resource_6850910000.js"></script> 
  <link href="./1968264071639728128/all.min.css" rel="stylesheet"> 
  <script src="./1968264071639728128/echarts.min.js"></script> 
  <script>tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        accent: '#0E42D2',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#E5E6EB',
                        'text-primary': '#1D2129',
                        'text-secondary': '#4E5969',
                        'text-tertiary': '#86909C',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    spacing: {
                        '220': '220px',
                        '250': '250px',
                    }
                },
            }
        }</script> 
  <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .menu-item {
                @apply flex items-center px-4 py-3 text-text-secondary hover:bg-neutral-dark transition-all duration-200 cursor-pointer;
            }
            .menu-item-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .submenu-item {
                @apply flex items-center px-8 py-2.5 text-text-secondary hover:bg-neutral-dark transition-all duration-200 cursor-pointer text-sm;
            }
            .submenu-item-active {
                @apply bg-primary/10 text-primary;
            }
            .card-shadow {
                box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.06);
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-md hover:bg-accent transition-all duration-200 flex items-center justify-center;
            }
            .btn-secondary {
                @apply bg-white text-primary border border-primary px-4 py-2 rounded-md hover:bg-primary/5 transition-all duration-200 flex items-center justify-center;
            }
            .btn-outline {
                @apply bg-white text-text-secondary border border-neutral-dark px-4 py-2 rounded-md hover:bg-neutral transition-all duration-200 flex items-center justify-center;
            }
            .input-field {
                @apply w-full px-3 py-2 border border-neutral-dark rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200;
            }
            .table-header {
                @apply bg-neutral text-text-secondary text-sm font-medium px-4 py-3;
            }
            .table-row {
                @apply border-b border-neutral-dark hover:bg-neutral/50 transition-all duration-200;
            }
            .badge {
                @apply px-2 py-1 rounded-full text-xs font-medium;
            }
            .badge-success {
                @apply bg-green-100 text-green-700;
            }
            .badge-warning {
                @apply bg-yellow-100 text-yellow-700;
            }
            .badge-danger {
                @apply bg-red-100 text-red-700;
            }
            .badge-info {
                @apply bg-blue-100 text-blue-700;
            }
            .badge-purple {
                @apply bg-purple-100 text-purple-700;
            }
            .badge-gray {
                @apply bg-gray-100 text-gray-700;
            }
        }
    </style> 
 </head> 
 <body class="font-inter bg-neutral text-text-primary h-screen flex overflow-hidden"> 
  <!-- 左侧菜单区域 --> 
  <aside class="w-220 bg-white h-full shadow-md z-10 transition-all duration-300 ease-in-out" id="sidebar"> 
   <!-- 品牌标识 --> 
   <div class="flex items-center justify-center h-16 border-b border-neutral-dark"> 
    <div class="flex items-center"> 
     <i class="fas fa-chart-line text-primary text-2xl mr-3"> </i> 
     <h1 class="text-xl font-bold text-primary"> Hi Quick AI </h1> 
    </div> 
   </div> 
   <!-- 菜单列表 --> 
   <nav class="py-4 h-[calc(100%-4rem)] overflow-y-auto scrollbar-hide"> 
    <!-- 每月必做 --> 
    <div class="menu-group"> 
     <div class="menu-item menu-item-active flex justify-between" data-menu="monthly"> 
      <div class="flex items-center"> 
       <i class="fas fa-calendar-check text-lg mr-3"> </i> 
       <span> 工作台 </span> 
      </div> 
     </div> 
     <div class="submenu hidden" id="submenu-monthly"> 
     </div> 
    </div> 
    <!-- 公司公告 --> 
    <div class="menu-group"> 
     <a class="yt-a-defalut-link menu-item flex justify-between" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1170&amp;h=728&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1968578812111224832&amp;appName=年规学员端最新版1.1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: inline; padding: 0px; border: 0px; box-shadow: none;"> 
      <div class="menu-item flex justify-between" data-menu="announcements" data-selectorname="#id-eu19q" style> 
       <div class="flex items-center"> 
        <i class="fas fa-bullhorn text-lg mr-3"> </i> 
        <span> 公司公告 </span> 
       </div> 
      </div> </a> 
     <div class="submenu hidden" id="submenu-announcements"> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967785482100146176&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="latest-announcements" data-selectorname="#id-9b4b3" style> 
        <i class="fas fa-newspaper text-xs mr-2"> </i> 
        <span> 最新公告 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1967783006529650688&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="historical-announcements" data-selectorname="#id-c2thd" style> 
        <i class="fas fa-history text-xs mr-2"> </i> 
        <span> 历史公告 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 年规管理 --> 
    <div class="menu-group"> 
     <a class="yt-a-defalut-link menu-item flex justify-between" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1321&amp;h=831&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1969787710210048000&amp;appName=demo1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: inline; padding: 0px; border: 0px; box-shadow: none;"> 
      <div class="menu-item flex justify-between" data-menu="planning" data-selectorname="#id-2uhnz" style> 
       <div class="flex items-center"> 
        <i class="fas fa-bullseye text-lg mr-3"> </i> 
        <span> 年规管理 </span> 
       </div> 
       <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
      </div> </a> 
     <div class="submenu hidden" id="submenu-planning"> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967790023482802176&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="goal-dashboard" data-selectorname="#id-vus62" style> 
        <i class="fas fa-chart-pie text-xs mr-2"> </i> 
        <span> 目标进度看板 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967822263025664000&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="false" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="performance-entry" data-selectorname="#id-1nnsg" style> 
        <i class="fas fa-pencil-alt text-xs mr-2"> </i> 
        <span> 业绩回填 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967832363245240320&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="product-library" data-selectorname="#id-06tsk" style> 
        <i class="fas fa-box text-xs mr-2"> </i> 
        <span> 产品库 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967836966959448064&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="marketing-plan" data-selectorname="#id-p036z" style> 
        <i class="fas fa-bullhorn text-xs mr-2"> </i> 
        <span> 营销计划 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967839529905684480&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="customer-records" data-selectorname="#id-ezqcd" style> 
        <i class="fas fa-users text-xs mr-2"> </i> 
        <span> 客户档案 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967841389332922368&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="pk-activities" data-selectorname="#id-r4cw8" style> 
        <i class="fas fa-trophy text-xs mr-2"> </i> 
        <span> PK 活动 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 工作管理 --> 
    <div class="menu-group"> 
     <a class="yt-a-defalut-link menu-item flex justify-between" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1245&amp;h=762&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967843857995399168&amp;appName=年规学员端最新版1.1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: inline; padding: 0px; border: 0px; box-shadow: none;"> 
      <div class="menu-item flex justify-between" data-menu="work" data-selectorname="#id-r3ppp" style> 
       <div class="flex items-center"> 
        <i class="fas fa-briefcase text-lg mr-3"> </i> 
        <span> 工作管理 </span> 
       </div> 
       <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
      </div> </a> 
     <div class="submenu hidden" id="submenu-work"> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967843857995399168&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="work-dashboard" data-selectorname="#id-2me7c" style> 
        <i class="fas fa-chart-bar text-xs mr-2"> </i> 
        <span> 数据看板 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967850301578805248&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="meeting-plan" data-selectorname="#id-zv2ra" style> 
        <i class="fas fa-calendar-alt text-xs mr-2"> </i> 
        <span> 会议计划 </span> 
       </div> </a> 
      <div class="submenu-item" data-page="work-tasks"> 
       <i class="fas fa-tasks text-xs mr-2"> </i> 
       <span> 工作任务 </span> 
      </div> 
     </div> 
    </div> 
    <!-- 学习成长 --> 
    <div class="menu-group"> 
     <a class="yt-a-defalut-link menu-item flex justify-between" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1412&amp;h=913&amp;appuuid=1969721745313103872&amp;version=3&amp;pageType=web&amp;uuid=1968967895824203776&amp;appName=demo" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: inline; padding: 0px; border: 0px; box-shadow: none;"> 
      <div class="menu-item flex justify-between" data-menu="learning" data-selectorname="#id-edel9" style> 
       <div class="flex items-center"> 
        <i class="fas fa-graduation-cap text-lg mr-3"> </i> 
        <span> 学习成长 </span> 
       </div> 
       <i class="fas fa-chevron-right text-xs transition-transform duration-200" style> </i> 
      </div> </a> 
     <div class="submenu hidden" id="submenu-learning"> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868720126623744&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="company-culture" data-selectorname="#id-w5t8g" style> 
        <i class="fas fa-building text-xs mr-2"> </i> 
        <span> 企业文化 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868783729049600&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="course-center" data-selectorname="#id-u8ga5" style> 
        <i class="fas fa-book-open text-xs mr-2"> </i> 
        <span> 课程中心 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868795963834368&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="knowledge-base" data-selectorname="#id-mfi6d" style> 
        <i class="fas fa-book text-xs mr-2"> </i> 
        <span> 知识库 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868797977100288&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="learning-plan" data-selectorname="#id-xnomv" style> 
        <i class="fas fa-clipboard-list text-xs mr-2"> </i> 
        <span> 学习计划 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 个人档案 --> 
    <div class="menu-group"> 
     <a class="yt-a-defalut-link menu-item flex justify-between" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1245&amp;h=762&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868800292356096&amp;appName=年规学员端最新版1.1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: inline; padding: 0px; border: 0px; box-shadow: none;"> 
      <div class="menu-item flex justify-between" data-menu="profile" data-selectorname="#id-sblh7" style> 
       <div class="flex items-center"> 
        <i class="fas fa-user text-lg mr-3"> </i> 
        <span style> 个人档案 </span> 
       </div> 
       <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
      </div> </a> 
     <div class="submenu hidden" id="submenu-profile"> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868800292356096&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="basic-info" data-selectorname="#id-o7ifu" style> 
        <i class="fas fa-id-card text-xs mr-2"> </i> 
        <span> 基本信息 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868801315766272&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="account-settings" data-selectorname="#id-1wyl4" style> 
        <i class="fas fa-cog text-xs mr-2"> </i> 
        <span> 账号设置 </span> 
       </div> </a> 
     </div> 
    </div> 
   </nav> 
  </aside> 
  <!-- 右侧内容区域 --> 
  <main class="flex-1 flex flex-col overflow-hidden"> 
   <!-- 顶部导航栏 --> 
   <header class="h-16 bg-white border-b border-neutral-dark flex items-center justify-between px-6 z-10" data-ytextravalue="extra-uz5x7h9is"> 
    <div class="flex items-center" data-ytparentvalue="extra-uz5x7h9is" data-ytoriginindex="0" data-ytindex="0" data-ytextravalue="extra-6g07okzi1"> 
     <button class="mr-4 text-text-secondary hover:text-primary transition-colors duration-200" id="toggle-sidebar" data-ytoriginindex="0" data-ytindex="0"> <i class="fas fa-bars text-xl"> </i> </button> 
     <div class="text-sm text-text-tertiary" id="breadcrumb" data-ytparentvalue="extra-6g07okzi1" data-ytoriginindex="1" data-ytindex="1" style="position: relative; left: 1px; opacity: 1; color: rgb(134, 144, 156); font-family: Inter, system-ui, sans-serif; font-size: 14px; font-weight: 400; font-style: normal; line-height: 20px; text-align: start; text-indent: 0px;"> 
      <span class="custom-edit-text-content" contenteditable="false" style="outline: none;"> 工作台 </span> 
      <i class="fas fa-angle-right mx-2 text-xs custom-edit-text-content" style> </i> 
      <span style="outline: none;" class contenteditable="false"> </span> 
     </div> 
    </div> 
    <div class="flex items-center space-x-6" data-ytoriginindex="1" data-ytindex="1"> 
     <div class="relative"> 
      <input class="pl-10 pr-4 py-2 rounded-full text-sm border border-neutral-dark focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64" placeholder="搜索..." type="text"> 
      <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-text-tertiary"> </i> 
     </div> 
     <div class="relative"> 
      <button class="relative text-text-secondary hover:text-primary transition-colors duration-200"> <i class="fas fa-bell text-xl"> </i> <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"> </span> </button> 
     </div> 
     <div class="flex items-center cursor-pointer group"> 
      <img alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all duration-200" src="./1968264071639728128/f48e4ae6256cb09fa61d11486866b14f.png"> 
      <div class="ml-2 hidden md:block"> 
       <div class="text-sm font-medium">
         张明 
       </div> 
       <div class="text-xs text-text-tertiary">
         销售部 
       </div> 
      </div> 
      <i class="fas fa-angle-down ml-1 text-text-tertiary"> </i> 
     </div> 
    </div> 
   </header> 
   <!-- 内容滚动区域 --> 
   <div class="flex-1 overflow-y-auto p-6 bg-neutral" id="content-area"> 
    <!-- 我的月度待办页面 --> 
    <div class="page active" id="page-monthly-tasks"> 
     <div class="flex justify-between items-center mb-6"> 
      <h2 class="text-2xl font-bold"> 工作台 </h2> 
      <div class="flex items-center space-x-3"> 
       <div class="relative"> 
        <select class="input-field pr-8 appearance-none bg-white w-44" id="month-selector"> <option selected value="2023-06"> 2023年6月 </option> <option value="2023-07"> 2023年7月 </option> <option value="2023-08"> 2023年8月 </option> <option value="2023-09"> 2023年9月 </option> <option value="2023-10"> 2023年10月 </option> <option value="2023-11"> 2023年11月 </option> <option value="2023-12"> 2023年12月 </option> </select> 
        <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-text-tertiary pointer-events-none"> </i> 
       </div> 
       <button class="btn-primary" id="add-monthly-task-btn"> <i class="fas fa-plus mr-2"> </i> 添加待办 </button> 
      </div> 
     </div> 
     <!-- 模板内容区块 --> 
     <div class="relative mb-6"> 
      <div class="absolute right-0 top-[-24px]"> 
       <a href="javascript:void(0);" class="text-primary hover:text-accent text-sm font-medium flex items-center" target="_top" is-page="true" is-add="false" custom-href="w=1181&amp;h=728&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967790023482802176&amp;appName=年规学员端最新版1.1" onclick="ytCustomLinkNavigation()" style="top:8px;position:relative"> 查看完成目标 <i class="fas fa-angle-right ml-1"> </i> </a> 
      </div> 
      <div class="grid grid-cols-12 gap-6" data-selectorname="#id-v5mfs" style="top:14px;position:relative" data-ytextravalue="extra-6eshiboyk"> 
       <div class="col-span-3 bg-white rounded-lg card-shadow p-5 transition-all duration-300 hover:shadow-lg" data-ytoriginindex="0" data-ytindex="0"> 
        <div class="text-text-tertiary text-sm mb-2">
          年度目标完成率 
        </div> 
        <div class="flex items-end justify-between mb-4"> 
         <div> 
          <span class="text-3xl font-bold"> 78% </span> 
         </div> 
         <div class="text-text-tertiary text-sm">
           100W/300W 
         </div> 
        </div> 
        <div class="w-full bg-neutral rounded-full h-2 mb-1"> 
         <div class="bg-primary h-2 rounded-full" style="width: 78%"> 
         </div> 
        </div> 
        <div class="text-xs text-text-tertiary flex justify-between"> 
         <span> 0 </span> 
         <span> 300W </span> 
        </div> 
       </div> 
       <div class="col-span-3 bg-white rounded-lg card-shadow p-5 transition-all duration-300 hover:shadow-lg" data-ytextravalue="extra-13agtjomx" data-selectorname="#id-w2wyh" data-ytparentvalue="extra-6eshiboyk" data-ytoriginindex="1" data-ytindex="1" style="background-color:rgb(255, 255, 255)"> 
        <div class="text-text-tertiary text-sm mb-2" data-ytparentvalue="extra-13agtjomx" data-ytoriginindex="0" data-ytindex="0">
          已完成任务 
        </div> 
        <div class="flex items-end justify-between mb-4" data-ytoriginindex="1" data-ytindex="1"> 
         <div> 
          <span class="text-3xl font-bold"> 24 </span> 
         </div> 
        </div> 
        <div class="flex items-center justify-between mb-1" data-ytparentvalue="extra-modbyctz1" data-ytoriginindex="0" data-ytindex="2" style="opacity: 1; color: rgb(29, 33, 41); font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 400; font-style: normal; line-height: 24px; text-align: start; text-indent: 0px;"> 
         <span class="text-sm text-text-secondary" style> 已完成 </span> 
         <span class="text-sm font-medium"> 24/32 </span> 
        </div> 
        <div class="space-y-3" data-ytoriginindex="2" data-ytindex="2" data-ytextravalue="extra-modbyctz1"> 
         <div class="w-full bg-neutral rounded-full h-2.5" data-ytoriginindex="1" data-ytindex="0"> 
          <div class="bg-primary h-2.5 rounded-full" style="width: 75%"> 
          </div> 
         </div> 
         <div class="flex justify-between text-xs text-text-tertiary" data-ytoriginindex="2" data-ytindex="1"> 
          <span> 0 </span> 
          <span> 32 </span> 
         </div> 
        </div> 
       </div> 
       <div class="col-span-3 bg-white rounded-lg card-shadow p-5 transition-all duration-300 hover:shadow-lg" data-ytoriginindex="2" data-ytindex="2"> 
        <div class="text-text-tertiary text-sm mb-2">
          逾期任务 
        </div> 
        <div class="flex items-end justify-between mb-4"> 
         <div> 
          <span class="text-3xl font-bold text-red-500"> 3 </span> 
         </div> 
         <div class="text-text-tertiary text-sm">
           风险等级: 中 
         </div> 
        </div> 
        <div class="flex items-center text-sm text-red-500"> 
         <i class="fas fa-exclamation-circle mr-2"> </i> 
         <span> 需尽快处理逾期任务 </span> 
        </div> 
       </div> 
       <div class="col-span-3 bg-white rounded-lg card-shadow p-5 transition-all duration-300 hover:shadow-lg" data-ytoriginindex="3" data-ytindex="3"> 
        <div class="text-text-tertiary text-sm mb-2">
          关键目标达成 
        </div> 
        <div class="flex items-end justify-between mb-4"> 
         <div> 
          <span class="text-3xl font-bold"> 5/6 </span> 
          <span class="text-green-500 text-sm ml-2"> 83% </span> 
         </div> 
         <div class="text-text-tertiary text-sm">
           年度关键目标 
         </div> 
        </div> 
        <div class="space-y-2"> 
         <div class="flex items-center justify-between"> 
          <span class="text-sm"> 销售额突破 </span> 
          <span class="badge badge-success"> 已完成 </span> 
         </div> 
         <div class="flex items-center justify-between"> 
          <span class="text-sm"> 新客户开发 </span> 
          <span class="badge badge-success"> 已完成 </span> 
         </div> 
         <div class="flex items-center justify-between"> 
          <span class="text-sm"> 产品培训 </span> 
          <span class="badge badge-warning"> 进行中 </span> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <!-- 月度重点任务 --> 
     <div class="mb-6"> 
      <h3 class="text-lg font-bold mb-6"> 月度重点任务 </h3> 
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> 
       <div class="bg-white rounded-lg card-shadow p-6 transition-all duration-300 hover:shadow-lg"> 
        <div class="flex items-start justify-between mb-3"> 
         <div class="font-medium">
           第二季度销售报告 
         </div> 
         <span class="badge badge-warning"> 进行中 </span> 
        </div> 
        <div class="text-sm text-text-tertiary mb-3">
          截止日期: 2023-06-30 
        </div> 
        <div class="w-full bg-neutral rounded-full h-2.5 mb-1"> 
         <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 75%"> 
         </div> 
        </div> 
        <div class="text-xs text-text-tertiary text-right">
          75% 完成 
        </div> 
       </div> 
       <div class="bg-white rounded-lg card-shadow p-6 transition-all duration-300 hover:shadow-lg"> 
        <div class="flex items-start justify-between mb-3" data-ytextravalue="extra-f07ocamel"> 
         <div class="font-medium" data-ytoriginindex="0" data-ytindex="0">
           客户满意度调查 
         </div> 
         <span class="badge badge-warning" data-ytparentvalue="extra-f07ocamel" data-ytoriginindex="1" data-ytindex="1"> 进行中 </span> 
        </div> 
        <div class="text-sm text-text-tertiary mb-3">
          完成日期: 2023-06-25 
        </div> 
        <div class="w-full bg-neutral rounded-full h-2.5 mb-1"> 
         <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 100%"> 
         </div> 
        </div> 
        <div class="text-xs text-text-tertiary text-right">
          99% 完成 
        </div> 
       </div> 
       <div class="bg-white rounded-lg card-shadow p-6 transition-all duration-300 hover:shadow-lg"> 
        <div class="flex items-start justify-between mb-3"> 
         <div class="font-medium">
           新产品培训 
         </div> 
         <span class="badge badge-warning"> 进行中 </span> 
        </div> 
        <div class="text-sm text-text-tertiary mb-3">
          原截止日期: 2023-06-18 
        </div> 
        <div class="w-full bg-neutral rounded-full h-2.5 mb-1"> 
         <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 40%"> 
         </div> 
        </div> 
        <div class="text-xs text-text-tertiary text-right">
          40% 完成 
        </div> 
       </div> 
       <div class="bg-white rounded-lg card-shadow p-6 transition-all duration-300 hover:shadow-lg"> 
        <div class="flex items-start justify-between mb-3"> 
         <div class="font-medium">
           销售团队会议 
         </div> 
         <span class="badge badge-info"> 待开始 </span> 
        </div> 
        <div class="text-sm text-text-tertiary mb-3">
          计划日期: 2023-06-28 
        </div> 
        <div class="w-full bg-neutral rounded-full h-2.5 mb-1"> 
         <div class="bg-gray-400 h-2.5 rounded-full" style="width: 0%"> 
         </div> 
        </div> 
        <div class="text-xs text-text-tertiary text-right">
          0% 完成 
        </div> 
       </div> 
      </div> 
     </div> 
     <!-- 月度任务列表 --> 
     <div class="bg-white rounded-lg card-shadow mb-6"> 
      <div class="p-4 border-b border-neutral-dark flex justify-between items-center"> 
       <h3 class="text-lg font-bold"> 月度任务清单 </h3> 
       <div class="flex items-center space-x-2"> 
        <div class="relative"> 
         <select class="input-field pr-8 appearance-none bg-white w-40 text-sm"> <option value="all"> 全部任务 </option> <option value="completed"> 已完成 </option> <option value="in-progress"> 进行中 </option> <option value="pending"> 待开始 </option> <option value="overdue"> 已逾期 </option> </select> 
         <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-text-tertiary pointer-events-none text-xs"> </i> 
        </div> 
        <div class="relative"> 
         <select class="input-field pr-8 appearance-none bg-white w-40 text-sm"> <option value="deadline-asc"> 截止日期从近到远 </option> <option value="deadline-desc"> 截止日期从远到近 </option> <option value="priority-desc"> 优先级从高到低 </option> <option value="priority-asc"> 优先级从低到高 </option> </select> 
         <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-text-tertiary pointer-events-none text-xs"> </i> 
        </div> 
       </div> 
      </div> 
      <div class="overflow-x-auto"> 
       <table class="min-w-full divide-y divide-neutral-dark"> 
        <thead> 
         <tr> 
          <th class="table-header text-left w-10"> <input class="rounded text-primary focus:ring-primary/30" type="checkbox"> </th> 
          <th class="table-header text-left"> 任务名称 </th> 
          <th class="table-header text-left"> 任务类型 </th> 
          <th class="table-header text-left"> 优先级 </th> 
          <th class="table-header text-left"> 截止日期 </th> 
          <th class="table-header text-left"> 状态 </th> 
          <th class="table-header text-left"> 进度 </th> 
          <th class="table-header text-left"> 操作 </th> 
         </tr> 
        </thead> 
        <tbody class="divide-y divide-neutral-dark"> 
         <tr class="table-row"> 
          <td class="px-4 py-4 whitespace-nowrap"> <input checked class="rounded text-primary focus:ring-primary/30" type="checkbox"> </td> 
          <td class="px-4 py-4 whitespace-nowrap"> 
           <div class="font-medium">
             客户满意度调查 
           </div> 
           <div class="text-xs text-text-tertiary mt-0.5">
             销售部 &gt; 客户关系 
           </div> </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> <span class="badge badge-gray"> 报告 </span> </td> 
          <td class="px-4 py-4 whitespace-nowrap"> <span class="badge badge-warning"> 中 </span> </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> 2023-06-25 </td> 
          <td class="px-4 py-4 whitespace-nowrap"> <span class="badge badge-success"> 已完成 </span> </td> 
          <td class="px-4 py-4 whitespace-nowrap"> 
           <div class="w-full bg-neutral rounded-full h-2.5"> 
            <div class="bg-green-500 h-2.5 rounded-full" style="width: 100%"> 
            </div> 
           </div> 
           <div class="text-xs text-text-tertiary mt-1 text-right">
             100% 
           </div> </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> <button class="text-primary hover:text-accent mr-3" title="查看详情"> <i class="fas fa-eye"> </i> </button> <button class="text-text-secondary hover:text-text-primary" title="任务记录"> <i class="fas fa-history"> </i> </button> </td> 
         </tr> 
         <tr class="table-row"> 
          <td class="px-4 py-4 whitespace-nowrap"> <input class="rounded text-primary focus:ring-primary/30" type="checkbox"> </td> 
          <td class="px-4 py-4 whitespace-nowrap"> 
           <div class="font-medium">
             第二季度销售报告 
           </div> 
           <div class="text-xs text-text-tertiary mt-0.5">
             销售部 &gt; 业绩报告 
           </div> </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> <span class="badge badge-purple"> 分析 </span> </td> 
          <td class="px-4 py-4 whitespace-nowrap"> <span class="badge badge-danger"> 高 </span> </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> 2023-06-30 </td> 
          <td class="px-4 py-4 whitespace-nowrap"> <span class="badge badge-warning"> 进行中 </span> </td> 
          <td class="px-4 py-4 whitespace-nowrap"> 
           <div class="w-full bg-neutral rounded-full h-2.5"> 
            <div class="bg-primary h-2.5 rounded-full" style="width: 75%"> 
            </div> 
           </div> 
           <div class="text-xs text-text-tertiary mt-1 text-right">
             75% 
           </div> </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> <button class="text-primary hover:text-accent mr-3" title="查看详情"> <i class="fas fa-eye"> </i> </button> <button class="text-text-secondary hover:text-text-primary mr-3" title="编辑任务"> <i class="fas fa-edit"> </i> </button> <button class="text-text-secondary hover:text-text-primary" title="标记完成"> <i class="fas fa-check"> </i> </button> </td> 
         </tr> 
         <tr class="table-row"> 
          <td class="px-4 py-4 whitespace-nowrap"> <input class="rounded text-primary focus:ring-primary/30" type="checkbox"> </td> 
          <td class="px-4 py-4 whitespace-nowrap"> 
           <div class="font-medium">
             新产品培训资料整理 
           </div> 
           <div class="text-xs text-text-tertiary mt-0.5">
             销售部 &gt; 产品培训 
           </div> </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> <span class="badge badge-blue-100 text-blue-700"> 培训 </span> </td> 
          <td class="px-4 py-4 whitespace-nowrap"> <span class="badge badge-warning"> 中 </span> </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> 2023-06-18 </td> 
          <td class="px-4 py-4 whitespace-nowrap"> <span class="badge badge-danger"> 已逾期 </span> </td> 
          <td class="px-4 py-4 whitespace-nowrap"> 
           <div class="w-full bg-neutral rounded-full h-2.5"> 
            <div class="bg-red-500 h-2.5 rounded-full" style="width: 40%"> 
            </div> 
           </div> 
           <div class="text-xs text-text-tertiary mt-1 text-right">
             40% 
           </div> </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> <button class="text-primary hover:text-accent mr-3" title="查看详情"> <i class="fas fa-eye"> </i> </button> <button class="text-text-secondary hover:text-text-primary mr-3" title="编辑任务"> <i class="fas fa-edit"> </i> </button> <button class="text-text-secondary hover:text-text-primary" title="标记完成"> <i class="fas fa-check"> </i> </button> </td> 
         </tr> 
         <tr class="table-row"> 
          <td class="px-4 py-4 whitespace-nowrap"> <input class="rounded text-primary focus:ring-primary/30" type="checkbox"> </td> 
          <td class="px-4 py-4 whitespace-nowrap"> 
           <div class="font-medium">
             7月营销活动策划 
           </div> 
           <div class="text-xs text-text-tertiary mt-0.5">
             市场部 &gt; 活动策划 
           </div> </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> <span class="badge badge-green-100 text-green-700"> 策划 </span> </td> 
          <td class="px-4 py-4 whitespace-nowrap"> <span class="badge badge-danger"> 高 </span> </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> 2023-06-28 </td> 
          <td class="px-4 py-4 whitespace-nowrap"> <span class="badge badge-info"> 待开始 </span> </td> 
          <td class="px-4 py-4 whitespace-nowrap"> 
           <div class="w-full bg-neutral rounded-full h-2.5"> 
            <div class="bg-gray-400 h-2.5 rounded-full" style="width: 0%"> 
            </div> 
           </div> 
           <div class="text-xs text-text-tertiary mt-1 text-right">
             0% 
           </div> </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> <button class="text-primary hover:text-accent mr-3" title="查看详情"> <i class="fas fa-eye"> </i> </button> <button class="text-text-secondary hover:text-text-primary mr-3" title="编辑任务"> <i class="fas fa-edit"> </i> </button> <button class="text-text-secondary hover:text-text-primary" title="开始任务"> <i class="fas fa-play"> </i> </button> </td> 
         </tr> 
         <tr class="table-row"> 
          <td class="px-4 py-4 whitespace-nowrap"> <input checked class="rounded text-primary focus:ring-primary/30" type="checkbox"> </td> 
          <td class="px-4 py-4 whitespace-nowrap"> 
           <div class="font-medium">
             销售数据统计分析 
           </div> 
           <div class="text-xs text-text-tertiary mt-0.5">
             销售部 &gt; 数据分析 
           </div> </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> <span class="badge badge-purple"> 分析 </span> </td> 
          <td class="px-4 py-4 whitespace-nowrap"> <span class="badge badge-info"> 低 </span> </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> 2023-06-20 </td> 
          <td class="px-4 py-4 whitespace-nowrap"> <span class="badge badge-success"> 已完成 </span> </td> 
          <td class="px-4 py-4 whitespace-nowrap"> 
           <div class="w-full bg-neutral rounded-full h-2.5"> 
            <div class="bg-green-500 h-2.5 rounded-full" style="width: 100%"> 
            </div> 
           </div> 
           <div class="text-xs text-text-tertiary mt-1 text-right">
             100% 
           </div> </td> 
          <td class="px-4 py-4 whitespace-nowrap text-sm"> <button class="text-primary hover:text-accent mr-3" title="查看详情"> <i class="fas fa-eye"> </i> </button> <button class="text-text-secondary hover:text-text-primary" title="任务记录"> <i class="fas fa-history"> </i> </button> </td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
      <!-- 分页 --> 
      <div class="px-4 py-3 flex items-center justify-between border-t border-neutral-dark"> 
       <div class="text-sm text-text-tertiary">
         显示 1 至 5 条，共 18 条记录 
       </div> 
       <div class="flex space-x-1"> 
        <button class="px-3 py-1 rounded border border-neutral-dark text-text-secondary hover:bg-neutral disabled:opacity-50 disabled:cursor-not-allowed" disabled> <i class="fas fa-angle-left"> </i> </button> 
        <button class="px-3 py-1 rounded border border-primary bg-primary text-white"> 1 </button> 
        <button class="px-3 py-1 rounded border border-neutral-dark text-text-secondary hover:bg-neutral"> 2 </button> 
        <button class="px-3 py-1 rounded border border-neutral-dark text-text-secondary hover:bg-neutral"> 3 </button> 
        <button class="px-3 py-1 rounded border border-neutral-dark text-text-secondary hover:bg-neutral"> 4 </button> 
        <button class="px-3 py-1 rounded border border-neutral-dark text-text-secondary hover:bg-neutral"> <i class="fas fa-angle-right"> </i> </button> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- 其他页面内容保持不变 --> 
    <div class="page hidden" id="page-work-tasks"> 
    </div> 
    <div class="page hidden" id="page-work-dashboard"> 
    </div> 
    <div class="page hidden" id="page-meeting-plan"> 
    </div> 
    <div class="page hidden" id="page-latest-announcements"> 
    </div> 
    <div class="page hidden" id="page-historical-announcements"> 
    </div> 
    <div class="page hidden" id="page-goal-dashboard"> 
    </div> 
    <div class="page hidden" id="page-performance-entry"> 
    </div> 
    <div class="page hidden" id="page-product-library"> 
    </div> 
    <div class="page hidden" id="page-marketing-plan"> 
    </div> 
    <div class="page hidden" id="page-customer-records"> 
    </div> 
    <div class="page hidden" id="page-pk-activities"> 
    </div> 
   </div> 
  </main> 
  <!-- 添加月度任务模态框 --> 
  <div class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4" id="add-monthly-task-modal"> 
   <div class="bg-white rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto"> 
    <div class="border-b border-neutral-dark p-5 flex justify-between items-center sticky top-0 bg-white z-10"> 
     <h3 class="text-xl font-bold"> 添加月度任务 </h3> 
     <button class="text-text-tertiary hover:text-text-primary transition-colors" id="close-monthly-task-modal"> <i class="fas fa-times text-xl"> </i> </button> 
    </div> 
    <div class="p-5"> 
     <form id="add-monthly-task-form"> 
      <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-5"> 
       <div> 
        <label class="block text-sm font-medium text-text-primary mb-2" for="monthly-task-title"> 任务名称 <span class="text-red-500"> * </span> </label> 
        <input class="input-field" id="monthly-task-title" placeholder="请输入任务名称" required type="text"> 
       </div> 
       <div> 
        <label class="block text-sm font-medium text-text-primary mb-2" for="monthly-task-type"> 任务类型 <span class="text-red-500"> * </span> </label> 
        <select class="input-field" id="monthly-task-type" required> <option value> 请选择任务类型 </option> <option value="report"> 报告 </option> <option value="analysis"> 分析 </option> <option value="training"> 培训 </option> <option value="planning"> 计划 </option> <option value="meeting"> 会议 </option> <option value="other"> 其他 </option> </select> 
       </div> 
       <div> 
        <label class="block text-sm font-medium text-text-primary mb-2" for="monthly-task-department"> 所属部门 </label> 
        <select class="input-field" id="monthly-task-department"> <option value="sales"> 销售部 </option> <option value="marketing"> 市场部 </option> <option value="product"> 产品部 </option> <option value="tech"> 技术部 </option> <option value="hr"> 人力资源部 </option> <option value="finance"> 财务部 </option> </select> 
       </div> 
       <div> 
        <label class="block text-sm font-medium text-text-primary mb-2" for="monthly-task-priority"> 优先级 <span class="text-red-500"> * </span> </label> 
        <select class="input-field" id="monthly-task-priority" required> <option value="high"> 高 </option> <option selected value="medium"> 中 </option> <option value="low"> 低 </option> </select> 
       </div> 
       <div> 
        <label class="block text-sm font-medium text-text-primary mb-2" for="monthly-task-deadline"> 截止日期 <span class="text-red-500"> * </span> </label> 
        <input class="input-field" id="monthly-task-deadline" required type="date"> 
       </div> 
       <div> 
        <label class="block text-sm font-medium text-text-primary mb-2" for="monthly-task-status"> 初始状态 </label> 
        <select class="input-field" id="monthly-task-status"> <option selected value="pending"> 待开始 </option> <option value="in-progress"> 进行中 </option> </select> 
       </div> 
      </div> 
      <div class="mb-5"> 
       <label class="block text-sm font-medium text-text-primary mb-2" for="monthly-task-description"> 任务描述 <span class="text-red-500"> * </span> </label> 
       <textarea class="input-field" id="monthly-task-description" placeholder="请详细描述任务内容和要求" required rows="4">
        </textarea> 
      </div> 
      <div class="mb-5"> 
       <label class="block text-sm font-medium text-text-primary mb-2" for="monthly-task-remark"> 备注信息 </label> 
       <textarea class="input-field" id="monthly-task-remark" placeholder="请输入备注信息" rows="3">
        </textarea> 
      </div> 
      <div class="flex justify-end space-x-3 pt-4 border-t border-neutral-dark"> 
       <button class="btn-outline" id="cancel-monthly-task-btn" type="button"> 取消 </button> 
       <button class="btn-primary" type="submit"> <i class="fas fa-save mr-2"> </i> 保存任务 </button> 
      </div> 
     </form> 
    </div> 
   </div> 
  </div> 
  <script>// 页面加载时初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 菜单切换功能
            const menuItems = document.querySelectorAll('.menu-item[data-menu]');
            menuItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有菜单的活动状态
                    document.querySelectorAll('.menu-item').forEach(menu => { menu.classList.remove('menu-item-active'); });
                    
                    // 添加当前菜单的活动状态
                    item.classList.add('menu-item-active'); 
                    
// 工作台菜单特殊处理 - 直接显示对应页面
                    const menuId = item.getAttribute('data-menu');
                    if (menuId === 'monthly') {
                        // 获取工作台对应的页面ID和面包屑信息
                        const pageId = 'monthly-tasks';
                        const parentMenuText = item.querySelector('span').textContent;
                        const currentMenuText = '';
                        
                        // 更新面包屑
                        document.getElementById('breadcrumb').innerHTML = `




















<span>${parentMenuText}</span>
  <i class="fas fa-angle-right mx-2 text-xs">
  </i>
  <span>${currentMenuText}</span>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  `;
                        
                        // 切换页面显示
                        document.querySelectorAll('.page').forEach(page => { page.classList.add('hidden'); });
                        document.getElementById(`page-${pageId}`).classList.remove('hidden');
                    }
                });
            });
            
            // 子菜单切换功能
            const submenuItems = document.querySelectorAll('.submenu-item[data-page]');
            submenuItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有子菜单的活动状态
                    document.querySelectorAll('.submenu-item').forEach(submenu => { submenu.classList.remove('submenu-item-active'); });
                    
                    // 添加当前子菜单的活动状态
                    item.classList.add('submenu-item-active');
                    
                    // 获取页面ID和面包屑信息
                    const pageId = item.getAttribute('data-page');
                    const parentMenu = item.closest('.submenu').id.replace('submenu-', '');
                    const parentMenuText = document.querySelector(`.menu-item[data-menu="${parentMenu}"] span`).textContent;
                    const currentMenuText = item.querySelector('span').textContent;
                    
                    // 更新面包屑
                    document.getElementById('breadcrumb').innerHTML = `






















<span>${parentMenuText}</span>
  <i class="fas fa-angle-right mx-2 text-xs">
  </i>
  <span>${currentMenuText}</span>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  `;
                    
                    // 切换页面显示
                    document.querySelectorAll('.page').forEach(page => { page.classList.add('hidden'); });
                    document.getElementById(`page-${pageId}`).classList.remove('hidden');
                });
            });
            
            // 侧边栏切换功能
            const toggleSidebar = document.getElementById('toggle-sidebar');
            const sidebar = document.getElementById('sidebar');
            toggleSidebar.addEventListener('click', () => {
                if (sidebar.classList.contains('w-220')) {
                    sidebar.classList.remove('w-220');  
                    sidebar.classList.add('w-20');
                    // 隐藏菜单文本
                    document.querySelectorAll('.menu-item span:first-of-type').forEach(text => { text.classList.add('hidden'); });
                    document.querySelectorAll('.submenu').forEach(submenu => { submenu.classList.add('hidden'); });
                    document.querySelectorAll('.menu-item i:last-child').forEach(icon => { icon.classList.add('hidden'); });
                } else {
                    sidebar.classList.remove('w-20');
                    sidebar.classList.add('w-220');
                    // 显示菜单文本
                    document.querySelectorAll('.menu-item span:first-of-type').forEach(text => { text.classList.remove('hidden'); });
                    // 恢复之前打开的子菜单
                    document.querySelectorAll('.menu-item-active').forEach(menu => {
                        const menuId = menu.getAttribute('data-menu');
                        const submenu = document.getElementById(`submenu-${menuId}`);
                        if (submenu) { submenu.classList.remove('hidden'); }
                    });
                    document.querySelectorAll('.menu-item i:last-child').forEach(icon => { icon.classList.remove('hidden'); });
                }
            });
            

            
            // 添加月度任务模态框功能
            const addMonthlyTaskBtn = document.getElementById('add-monthly-task-btn');
            const addMonthlyTaskModal = document.getElementById('add-monthly-task-modal');
            const closeMonthlyTaskModal = document.getElementById('close-monthly-task-modal');
            const cancelMonthlyTaskBtn = document.getElementById('cancel-monthly-task-btn');
            const addMonthlyTaskForm = document.getElementById('add-monthly-task-form');
            
            // 设置默认日期为当前月的最后一天
            const setDefaultDate = () => {
                const now = new Date();
                const year = now.getFullYear();
                const month = now.getMonth() + 1; // 月份从0开始，需要+1
                const lastDay = new Date(year, month, 0).getDate(); // 获取当月最后一天
                
                // 格式化为YYYY-MM-DD
                const formattedMonth = month.toString().padStart(2, '0');
                const formattedDay = lastDay.toString().padStart(2, '0');
                const defaultDate = `${year}-${formattedMonth}-${formattedDay}`;
                
                document.getElementById('monthly-task-deadline').value = defaultDate;
            };
            
            // 打开添加月度任务模态框
            addMonthlyTaskBtn.addEventListener('click', () => {
                addMonthlyTaskModal.classList.remove('hidden');
                setDefaultDate();
            });
            
            // 关闭添加月度任务模态框
            function closeAddMonthlyTaskModal() {
                addMonthlyTaskModal.classList.add('hidden');
                addMonthlyTaskForm.reset();
            }
            
            closeMonthlyTaskModal.addEventListener('click', closeAddMonthlyTaskModal);
            cancelMonthlyTaskBtn.addEventListener('click', closeAddMonthlyTaskModal);
            
            // 点击模态框外部关闭
            addMonthlyTaskModal.addEventListener('click', (e) => {
                if (e.target === addMonthlyTaskModal) {
                    closeAddMonthlyTaskModal();
                }
            });
            
            // 提交添加月度任务表单
            addMonthlyTaskForm.addEventListener('submit', (e) => {
                e.preventDefault();
                // 这里添加表单提交逻辑
                alert('月度任务添加成功！');
                closeAddMonthlyTaskModal();
                // 在实际应用中，这里应该刷新任务列表或更新图表数据
            });
            
            // 月份选择器变化事件
            document.getElementById('month-selector').addEventListener('change', function() {
                // 在实际应用中，这里应该根据选择的月份加载对应的数据
                alert(`已切换到 ${this.options[this.selectedIndex].text} 的月度待办`);
                // 可以在这里更新图表数据
            });
        });</script>  
 </body>
</html>